<template>
	<view class="container">
		<com-head textTit="积分明细" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<template v-if="list.length">
			<view class="list" v-for="(ele,index) in list" :key="index">
				<view class="head">
					<!-- 会员充值 -->
					<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/haungguang.png"></image>
					<!-- 商品消费 -->
					<!-- <image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/liwu2.png"></image> -->
					<!-- 好友注册 -->
					<!-- <image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/haoyou.png"></image> -->
					<!-- 好友购买商品 -->
					<!-- <image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg12.png"></image> -->
					<text class="title">{{ele.content}}</text>
					<text class="number" :class="ele.points_type == 1 ? 'blue' : 'yellow'">{{ele.points_type == 1 ? "+" : "-"}}  {{ele.number}}</text>
				</view>
				<text class="timer">{{ele.create_time}}</text>
			</view>
			<u-loadmore margin-top="60" margin-bottom="30" :status="status" />
		</template>
		<view class="noDate" v-else>
			<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/10/2x-8.png" mode=""></image>
			<view>暂无更多积分记录~</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list:[],
				status:'loading',
				total:0,
				page:1,
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++;
				this.getUserIntegral();
			}
		},
		async onShow() {
			this.list =[]
			this.getUserIntegral()
		},
		methods: {
			async getUserIntegral(){
				let {code,data} = await this.$u.api.getUserIntegral({page:this.page});
				if(this.page == 1 && !data.data.lenght){
					this.status = 'nomore';
				}
				this.list = [...this.list, ...data.data];
				this.total = data.total;
				if (this.total <= this.list.length) this.status = 'nomore';
				else this.status = 'loading';
			},
		}
	}
</script>

<style lang="scss" scoped >
.container{
	width: 100%;
	padding: 50rpx 30rpx;
	box-sizing: border-box;
	.blue{
		color: #007664;
	}
	.yellow{
		color: #E8C778;
	}
	.noDate{
		width: 360rpx;
		position: absolute;
		left: 50%;
		top: 34%;
		transform: translate(-50%,-50%);
		color: #666666;
		font-size: 26rpx;
		text-align: center;
		image{
			width: 360rpx;
			height: 310rpx;
			display: block;
			margin-bottom: 78rpx;
		}
	}
	.list{
		width: 686rpx;
		height: 168rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 32rpx 34rpx 36rpx 32rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		.head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			image{
				width: 42rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			.title{
				color: #333333;
				line-height: 44rpx;
				letter-spacing: -1rpx;
				font-size: 26rpx;
				width: 480rpx;
				overflow: hidden;    
				text-overflow:ellipsis;    
				white-space: nowrap;
			}
			.number{
				width: 150rpx;
				font-size: 28rpx;
				text-align: right;
				line-height: 40rpx;
				font-weight: bold;
			}
		}
		.timer{
			font-size: 24rpx;
			color: #999999;
			line-height: 26rpx;
		}
	}
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
